<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			.active {
				color: black;
				background-color: #87ceeb;
				border: none;
				outline: none;
			}

			th {
				position: relative;
			}

			.topArrow {
				content: "";
				position: absolute;
				width: 0;
				height: 0;
				border-left: 8px solid transparent;
				border-right: 8px solid transparent;
				border-bottom: 8px solid black;
				top: 20px;
				right: 3px;
			}

			.lowArrow {
				content: "";
				position: absolute;
				width: 0;
				height: 0;
				border-left: 8px solid transparent;
				border-right: 8px solid transparent;
				border-top: 8px solid black;
				top: 35px;
				right: 3px;
			}
			
			.borderActive{
				border-color: red;
				border-left: 8px solid transparent;
				border-right: 8px solid transparent;
			}
		</style>
	</head>

	<body>
		<button class="add">添加一条新的访客信息</button>
		<button class="del">删除选中</button>
		<button class="sort">年龄排序</button>

		<label>全选功能<input type="checkbox" class="allSelect"></label>

		<button class="reverse">反选</button>
		<button class="num active">序号排序</button>
		<hr>
		<table border="1" cellspacing="0" cellpadding="20">
			<tr>
				<th>
					<span>序列号</span>
					<span class="topArrow "></span>
					<span class="lowArrow borderActive"></span>
				</th>
				<th>姓名</th>
				<th>
					<span>年龄</span>
					<span class="topArrow"></span>
					<span class="lowArrow"></span>
				</th>
				<th>操作</th>
				<th>选择</th>
			</tr>
		</table>

		<script type="text/javascript">
			var info = [{
					name: "胡杭",
					age: 16
				},
				{
					name: "胜明",
					age: 22
				},
				{
					name: "军毅",
					age: 21
				},
				{
					name: "晓华",
					age: 13
				},
				{
					name: "盛聪",
					age: 23
				},
				{
					name: "侦剑",
					age: 32
				},
				{
					name: "红翔",
					age: 25
				},
				{
					name: "超维",
					age: 18
				},
				{
					name: "士琪",
					age: 22
				},
				{
					name: "艳华",
					age: 20
				}
			];

			let add = document.querySelector(".add");
			let del = document.querySelector(".del");
			let sort = document.querySelector(".sort");
			let allSelect = document.querySelector(".allSelect");
			let reverse = document.querySelector(".reverse");
			let tbody = document.querySelector("tbody");
			let index = 0;
			// let newTr = null;
			let newDelBtn = null;
			let inpList = null;
			let trList = null;
			let isAllSelect = false;
			let newSelectCheckbox = null;
			let numBtn = document.querySelector(".num");
			let isAgeOrder = false;

			while (info) {
				if (index === 5) {
					break;
				}
				addItem();
			}

			function addItem() {

				// 块级作用域

				let newTr = document.createElement("tr");

				newDelBtn = document.createElement("button");

				newDelBtn.innerText = "删除";

				newDelBtn.addEventListener("click", function() {

					// tbody.removeChild(this.parentElement.parentElement);

					// tbody.removeChild(newTr);

					// removeChild 通知父节点要删除指定的子节点
					// remove 将自己删除

					newTr.remove();

				})

				newSelectCheckbox = document.createElement("input");
				newSelectCheckbox.setAttribute("type", "checkbox");
				// newSelectCheckbox.checked = isAllSelect;
				allSelect.checked = false;

				newSelectCheckbox.addEventListener("change", () => {
					isAllSelect = [...tbody.querySelectorAll("input")].every((item) => {
						return item.checked;
					})
					allSelect.checked = isAllSelect;
				})

				newTr.innerHTML =
					`
					<td>${(index+1).toString().padStart(2,0)}</td>
					<td>${info[(index%info.length)].name}</td>
					<td>${info[(index%info.length)].age}</td>
					<td></td>
					<td></td>
				`;

				newTr.querySelector("td:nth-child(4)").appendChild(newDelBtn);

				newTr.querySelector("td:last-child").appendChild(newSelectCheckbox);

				if (isAgeOrder) {
					// 按照年龄排序插入数据
					// 1. 获取现有tr的数据
					// 2. push(newTr) => 转化
					// 3. sort(年龄)
					// 4. appendChild(item) 插入tbody

					trList = [...document.querySelectorAll("tr:not(:first-child)")];

					trList.push(newTr);

					trList.sort((a, b) => {
						return a.children[2].innerText - b.children[2].innerText;
					})

					trList.forEach((item) => {
						tbody.appendChild(item)
					})

				} else {
					tbody.appendChild(newTr);
				}

				index++;

				// (++index === info.length) && (index = 0)

				// 1. document.querySelectorAll(".del")
				// 2. forEach()
				// 3. addEventListener()
				// 4. 删除

			}

			add.addEventListener("click", addItem);


			// add.addEventListener("click", () => {

			// 	// 块级作用域

			// 	let newTr = document.createElement("tr");

			// 	newDelBtn = document.createElement("button");

			// 	newDelBtn.innerText = "删除";

			// 	newDelBtn.addEventListener("click", function() {

			// 		// tbody.removeChild(this.parentElement.parentElement);

			// 		// tbody.removeChild(newTr);

			// 		// removeChild 通知父节点要删除指定的子节点
			// 		// remove 将自己删除

			// 		newTr.remove();

			// 	})

			// 	newTr.innerHTML =
			// 		`
			// 		<td>${(index+1).toString().padStart(2,0)}</td>
			// 		<td>${info[(index%info.length)].name}</td>
			// 		<td>${info[(index%info.length)].age}</td>
			// 		<td></td>
			// 		<td><input type="checkbox"></td>
			// 	`;

			// 	newTr.querySelector("td:nth-child(4)").appendChild(newDelBtn);

			// 	tbody.appendChild(newTr);

			// 	index++;

			// 	// (++index === info.length) && (index = 0)

			// 	// 1. document.querySelectorAll(".del")
			// 	// 2. forEach()
			// 	// 3. addEventListener()
			// 	// 4. 删除

			// })

			del.addEventListener("click", () => {
				// 1. 先获取input
				// 2. 遍历
				// 3. 判断是否选中
				// 4. 选中则移除

				inpList = tbody.querySelectorAll("input:checked");

				inpList.forEach((item) => {
					item.parentElement.parentElement.remove()
					// (item.checked) && (item.parentElement.parentElement.remove());
				})

				isAllSelect = false;
				allSelect.checked = false;


			})

			sort.addEventListener("click", () => {
				trList = document.querySelectorAll("tr:not(:first-child)");

				trList = [...trList].sort((a, b) => {
					return a.children[2].innerText - b.children[2].innerText;
				})

				trList.forEach((item) => {
					tbody.appendChild(item);
				})

				numBtn.classList.remove("active");
				sort.classList.add("active");

				isAgeOrder = true;

			})

			allSelect.addEventListener("change", () => {
				isAllSelect = allSelect.checked;
				tbody.querySelectorAll("input[type='checkbox']").forEach((item) => {
					item.checked = isAllSelect;
				})
			})

			reverse.addEventListener("click", () => {

				// console.log([...tbody.querySelectorAll("input")].filter((item) => {
				// 	item.checked = !item.checked;
				// 	return item.checked;
				// }));

				tbody.querySelectorAll("input").forEach((item) => {
					item.checked = !item.checked;
				})
				isAllSelect = [...tbody.querySelectorAll("input")].every((item) => {
					return item.checked;
				})
				allSelect.checked = isAllSelect;
			})

			numBtn.addEventListener("click", () => {
				[...document.querySelectorAll("tr:not(:first-child)")].sort((a, b) => {
					return a.firstElementChild.innerText - b.firstElementChild.innerText;
				}).forEach((item) => {
					tbody.appendChild(item);
				})

				sort.classList.remove("active");
				numBtn.classList.add("active");

				isAgeOrder = false;
			})
		</script>

		<script type="text/javascript">
			// let arr = [{
			// 	age: 11
			// }, {
			// 	age: 22
			// }, {
			// 	age: 33
			// }, {
			// 	name: "ly"
			// }]
			// // [11,22,33,undefined]
			// arr.map((item) => {
			// 	return item.age
			// })
			// [{
			// 	age: 22
			// },{
			// 	age: 33
			// }]
			// arr.filter((item) => {
			// 	return item.age > 18
			// })
		</script>

	</body>
</html>
